<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>div+css布局</title>
		<style>
			/**清楚body的内边距和外边距**/
			
			body {
				margin: 0px;
				padding: 0px;
			}
			
			#mainContainer {
				width: 1000px;
				/*居中**/
				margin: 5px auto 3px;
			}
			
			#head {
				height: 60px;
				text-align: center;
				background-color: red;
				margin-top: -15px;
			}
			
			#head p {
				padding-top: 20px;
			}
			
			#mainbody {
				height: 600px;
				text-align: center;
				background-color: yellow;
			}
			
			#footer {
				height: 40px;
				text-align: center;
				background-color: green;
			}
			
			#leftbody {
				float: left;
				height: 100%;
				width: 30%;
				background-color: #88C1DC;
			}
			
			#rightbody {
				float: left;
				height: 100%;
				width: 70%;
				background-color: #00FF00;
			}
			
			#rightbody div {
				float: left;
				width: 19%;
				margin-left: 5px;
			}
		</style>
	</head>

	<body>
		<div id="mainContainer">
			<!--head-->
			<div id="head">
				<p>head</p>
			</div>
			<div id="mainbody">
				<div id="leftbody"></div>
				<div id="rightbody">
					<div>div block1</div>
					<div>div block2</div>
					<div>div block3</div>
					<div>div block4</div>
					<div>div block5</div>
					<div>div block6</div>
					<div>div block7</div>
					<div style="clear: both;">div block8</div>
				</div>
			</div>
			<div id="footer"></div>
		</div>
	</body>

</html>